<template>
  <el-container>
    <el-header>
      <Header />
    </el-header>
    <el-main>
      <el-radio-group size="large" border="ture">
        <el-radio-button label="视频">
          <router-link to="/">冬奥精彩视频</router-link>
        </el-radio-button>

        <el-radio-button label="Earth">
          <router-link to="/Earth">冬奥主办城市</router-link>
        </el-radio-button>

        <el-radio-button label="Los Angeles">
          <router-link to="/Project">冬奥项目</router-link>
        </el-radio-button>

        <el-radio-button label="Los Angeles">
          <router-link to="/Ranking">奖牌榜</router-link>
        </el-radio-button>
      </el-radio-group>
      <router-view></router-view>
    </el-main>
    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script>
import Header from "./components/header.vue";
import Footer from "./components/footer.vue";

export default {
  name: "app",
  components: {
    Header,
    Footer,
  },
};
</script>



<style>
.el-radio-group {
  margin: 40px;
  margin-left: 20%;
}

.el-footer {
  position: relative;
  width: 100%;
  height: 298px !important;
  overflow: hidden;
  background: url(./assets/copyright-bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
}

.el-main {
  width: 100%;
  min-height: 900px;
  background: url(./assets/mindbg.png);
  background-size: auto 100%;
}

.el-header {
  height: 100%;
  height: 180px !important;
  background-size: auto 100%;
}

/* 样式初始化 */

a:link {
  text-decoration: none;
  /* 指正常的未被访问过的链接*/
}
a:visited {
  text-decoration: none;
  /*指已经访问过的链接*/
}
a:hover {
  text-decoration: none;
  color: #c81623;
  /*指鼠标在链接*/
}
a:active {
  text-decoration: none;
  /* 指正在点的链接*/
}

* {
  margin: 0;
  padding: 0;

  /* 定义字体样式 */
  font-family: "微软雅黑", "Microsoft YaHei", "Arial", "SimSun", "宋体";
  font-size: 20px;
  color: grey;
}
</style>
  